<style type="text/css">
    .bjy-desc {
        width: 600px;
        position: absolute;
        right: 0;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .bjy-demo {
        width: 500px;
        float: left;
    }
    .bjy-demo .button {
        background-color: #37A4F5;
        display: inline-block;
        color: #fff;
        padding: 10px 15px;
        vertical-align: top;
    }
    .bjy-demo .upload-wrapper {
        position: relative;
        overflow: hidden;
    }
    .bjy-demo .upload-wrapper object,
    .bjy-demo .upload-wrapper input[type="file"] {
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    .item-list {
        font-size: 14px;
        color: #2e5580;
        padding: 10px;
        display: block;
        float: left;
        width: 100%;
    }
    .item-name {
        display: inline-block;
        margin-right: 20px;
    }
</style>
<div class="bjy-demo">
    <div class="button upload-wrapper add-file-button">
        <input type="file">
        上传新视频
    </div>

    <div class="button btn-stop">
        停止上传
    </div>

    <div class="button btn-continue">
        继续上传
    </div>
</div>
<script src="__CDN__/assets/course/js/jquery-3.5.1.min.js"></script>
<script src="__CDN__/assets/course/js/upload.js"></script>
<script>
    var uploader = new BJY.VideoUploader({
        
        mainElement: $('input[type="file"]'),
        ignoreError: true,
        name: '',
        multiple: true,
        getUploadUrl: function (data) {
            return $.ajax({
                url: 'course/chapter/upload',
                type: 'post',
                data: {
                    file_name: data.videoName,
                    definition: 1,
                    course_id:$("#c-course-id").val(),
                }
            })
            .then(function (response) {
                if(response.code == 0){
                    var result = response.data;
                    $("#c-video-id").attr("value",result.video_id);
                    return {
                        id: result.video_id,
                        url: result.upload_url
                    };
                }else{
                    alert(response.msg);
                    return;
                }
                
            });
        },
        getResumeUploadUrl: function (data) {
            return $.ajax({
                url: 'course/chapter/upload',
                type: 'post',
                data: {
                    video_id: data.uploadId
                }
            })
            .then(function (response) {
                var result = response.data;
                if (!result) {
                    alert(response.msg);
                    return;
                }
                return {
                    fid: result.video_id,
                    id: result.video_id,
                    url: result.upload_url,
                    uploaded: result.upload_size
                };
            });
        },
        onFileChange: function (files) {
            var currentFiles = uploader.currentFiles;
            if (!currentFiles.length) {
                return;
            }

            if (!uploader.validateFiles(currentFiles)) {
                uploader.reset();
                return;
            }
            var itemHTML = '<div class="item-list">'

            $.each(
                currentFiles,
                function (index, file) {
                    itemHTML += '<div class="item">'
                        + '<span class="item-text item-name">'
                        + file.videoName
                        + '</span>'
                        + '<span class="item-text item-status">等待上传</span>'
                        + ' </div>';
                    uploader.autoUpload(file);
                }
            );

            itemHTML += '</div>';
            $(itemHTML).insertAfter($('.bjy-demo'))
        },
        onUploadStart: function (data) {
            console.log('onUploadStart', data.fileItem);
        },
        onUploadProgress: function (data) {
            $('.item')
            .eq(data.fileItem.index)
            .find('.item-status').html('上传' + data.percent + '>uploaded: ' + data.uploaded + '> total: ' +  data.total + '> index :' + data.fileItem.chunk.index);
        },
        onUploadSuccess: function (data) {
            video_id = $("#c-video-id").val(),
            console.log(video_id);
            $('.item').append("<a href='{:url('course/chapter/player?video_id="+video_id+"')}' target='_blank' class='button'>视频预览</a>");
            $('.item').eq(data.fileItem.index).find('.item-status').html('上传成功');
            $('.item').find('span').delay(1000).hide(0);
        },
        onChunkUploadError: function (data) {
            $("#c-video-id").attr("value",'');
            alert('上传错误，请重新上传');
        },
        onUploadError: function (data) {
            alert('上传错误，请重新上传');
            $('.item')
            .eq(data.fileItem.index)
            .find('.item-status').html('上传失败');
        },
        onUploadComplete: function (data) {
        },
        onError: function (data) {
            alert(data.content);
        }
    });
    $('.btn-stop').click(function () {
        // uploader.stopFile 传入上传的 index 可以停止上传
        uploader.stopFile(0);
    });
    $('.btn-continue').click(function () {
        // 继续上传
        var data = uploader.currentFiles[0];
        uploader.resumeUpload(data);
    });
</script>